
/*transition（平滑过度）: property（变化的属性） duration（变化的用时） timing-function（变化的速度） delay（变化开始前的延时时间）;*/
/*transform(变形)：rotate（90deg）旋转90度 scale（1.2）放大1.2倍 translate（400px,500px）位移水平400px，垂直500px skew（45deg 0deg）水平倾45度斜，垂直倾斜0度
transform-origin：right bottom 设置对象的中心为右下角*/

/*旋转变化*/
.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #8ccaee;
    transition: width 2s, height 1s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #eebb55;
    width: 200px;
    height: 200px;
    transform: rotate(180deg); /*180度旋转*/
}

/*字体变大*/
#delay1 {
    position: relative;
    transition-property: font-size;
    transition-delay: 10s; /*鼠标移开后 变化还原前延迟的时间*/
    font-size: 14px;
}

#delay1:hover {
    transition-property: font-size;
    transition-duration: 4s;
    transition-delay: 10s; /*鼠标移上去之后 变化开始前延迟的时间*/
    font-size: 36px;
}

/*高亮过渡*/
.menuButton {
    position: relative;
    transition-property: background-color, color;
    transition-duration: 2s;
    transition-timing-function: ease-out; /*规定速度效果的速度曲线，linear：匀速，ease：逐渐慢下来；ease-in：加速；ease-out：减速，ease-in-out：先加速后减速*/
    text-align: left;
    background-color: grey;
    left: 5px;
    top: 5px;
    height: 26px;
    color: white;
    font-family: sans-serif;
    font-size: 40px;
    text-decoration: none; /*文字上没有线，line-through：横穿文字一条线*/
    box-shadow: 2px 2px 1px black; /*阴影：水平位移 垂直位移 模糊距离 阴影尺寸 阴影颜色 inset（加这个的话就是把外阴影改为内阴影）*/
    padding: 2px 4px;
    border: solid 1px black;
}

.menuButton:hover {  /*这里的transition是开始变化，上面的transition是变回去的过度*/
    position: relative;
    transition-property: background-color, color;
    transition-duration: 3s;
    transition-timing-function: ease-out;
    background-color: white;
    color: black;
}



/*test1，不同速率的效果*/
#timings-demo{
    border: 1px solid darkcyan;
    padding: 10px;
    height: 800px;
    width: 800px;
}
.demo-box{
    width: 200px;
    text-align: center;
    line-height: 100px;
    color: #FFFFFF;
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
    margin-bottom: 10px;
}

/*逐渐慢下来*/
#ease{
    -webkit-transition: all 5s ease 0.3s ;
    -moz-transition: all 5s ease 0.3s ;
    -ms-transition: all 5s ease 0.3s ;
    -o-transition: all 5s ease 0.3s ;
    transition: all 5s ease 0.3s ;
    background: #f36;
}
/*加速*/
#ease-in {
    -moz-transition: all 3s ease-in 0.5s;
    -webkit-transition: all 3s ease-in 0.5s;
    -o-transition: all 3s ease-in 0.5s;
    transition: all 3s ease-in 0.5s;
    background: #369;
}
/*减速，和逐渐慢下来效果差不多*/
  #ease-out {
      -moz-transition: all 5s ease-out 0s;
      -webkit-transition: all 5s ease-out 0s;
      -o-transition: all 5s ease-out 0s;
      transition: all 5s ease-out 0s;
      background: #636;
  }
  /*先加速后减速*/
  #ease-in-out {
      -moz-transition: all 1s ease-in-out 2s;
      -webkit-transition: all 1s ease-in-out 2s;
      -o-transition: all 1s ease-in-out 2s;
      transition: all 1s ease-in-out 2s;
      background: #3e6;
  }
  /*匀速*/
  #linear {
      -moz-transition: all 6s linear 0s;
      -webkit-transition: all 6s linear 0s;
      -o-transition: all 6s linear 0s;
      transition: all 6s linear 0s;
      background: #999;
  }
  #cubic-bezier {
      -moz-transition: all 4s cubic-bezier 1s;
      -webkit-transition: all 4s cubic-bezier 1s;
      -o-transition: all 4s cubic-bezier 1s;
      transition: all 4s cubic-bezier 1s;
      background: #6d6;
  }

#timings-demo.timings-demo-hover .demo-box,
#timings-demo:hover .demo-box {
    -moz-transform: rotate(360deg) scale(1.2);
    -webkit-transform: rotate(360deg) scale(1.2);
    -o-transform: rotate(360deg) scale(1.2);
    transform: rotate(360deg) scale(1.2);
    background: #369;
    border: 1px solid rgba(255,230,255,08);
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    margin-left: 600px;
    line-height: 30px;
    margin-bottom: 15px;
}




























